<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>商友科技商城系统后台管理中心</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.4 -->
  <link href="__PUBLIC__/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <!-- Theme style -->
  <link href="__PUBLIC__/dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
  <!-- iCheck -->
  <link href="__PUBLIC__/plugins/iCheck/square/blue.css" rel="stylesheet" type="text/css" />
  <style>#imgVerify{width: 120px;margin: 0 auto; text-align: center;display: block;}	</style>
  <script>
      function detectBrowser()
      {
          var browser = navigator.appName
          if(navigator.userAgent.indexOf("MSIE")>0){
              var b_version = navigator.appVersion
              var version = b_version.split(";");
              var trim_Version = version[1].replace(/[ ]/g,"");
              if ((browser=="Netscape"||browser=="Microsoft Internet Explorer"))
              {
                  if(trim_Version == 'MSIE8.0' || trim_Version == 'MSIE7.0' || trim_Version == 'MSIE6.0'){
                      alert('请使用IE9.0版本以上进行访问');
                      return;
                  }
              }
          }
      }
      detectBrowser();
  </script>
</head>
<!--  style="background:url(__PUBLIC__/images/login_bg.jpg);"-->
<style>
.loginbg{background: #76b852;
    background: -webkit-linear-gradient(right, #E4E4E4, #FFFFFF);
    background: -moz-linear-gradient(right, #E4E4E4, #FFFFFF);
    background: -o-linear-gradient(right, #E4E4E4, #FFFFFF);
    background: linear-gradient(to left, #E4E4E4, #FFFFFF);}
</style>
<body class="loginbg" >
<br><br>
<div class="login-box" style="background-color:white; padding:15px 45px;box-shadow: 0 0 20px 0 rgba(189, 189, 189, 0.1), 0 5px 5px 0 rgba(189, 189, 189, 0.1);border-radius:5px;">

  <div class="login-logo">
  </div>
  <div class="login-box-body" style="width:100%; padding:0;">
    <p class="login-box-msg" style=" padding:0; padding-bottom:20px;"><img src="/Public/images/logo_red.png" width="245" ></p>
    <!--<p>请输入您注册商铺时申请的商家名称，登录密码为商城用户通用密码</p>-->
    <div class="form-group has-feedback">
      <input type="text" name="username" id="username" class="form-control" placeholder="账号" />
      <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
    </div>
    <div class="form-group has-feedback">
      <input type="password" name="password" class="form-control" id="password" placeholder="密码" />
      <span class="glyphicon glyphicon-lock form-control-feedback"></span>
    </div>
    <div class="form-group has-feedback">
      <opinioncontrol realtime="true" opinion_name="vertify_code" default="true">
        <div class="row" style="padding-right: 65px;">
          <div class="col-xs-8">
            <input style="width: 135px" type="text" name="vertify" class="form-control" placeholder="验证码"/>
          </div>
          <div class="col-xs-4">
            <img id="imgVerify" style="cursor:pointer; float:left;" src="{:U('Admin/vertify')}" onClick="fleshVerify();" />
          </div>
        </div>
      </opinioncontrol>
    </div>
    <!--
    <div class="row">
      <div class="col-xs-8">
        <div class="checkbox icheck">
          <label><input type="checkbox"> 记住密码  </label>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="checkbox icheck">
          <label><a href="#">找回密码</a></label>
        </div>
      </div>
    </div> -->
    <div class="form-group">
      <button type="button" class="btn btn-primary btn-block btn-flat" onClick="checkLogin()">立即登陆 </button>
    </div>
  </div>

  <div class="margin text-center">
    <div class="copyright">
      
      <br/>

    </div>
  </div>
</div>
<!-- /.login-box -->
<!-- jQuery 2.1.4 -->
<script src="__PUBLIC__/plugins/jQuery/jQuery-2.1.4.min.js" type="text/javascript"></script>
<!-- Bootstrap 3.3.2 JS -->
<script src="__PUBLIC__/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<!-- iCheck -->
<script src="__PUBLIC__/plugins/iCheck/icheck.min.js" type="text/javascript"></script>
<script src="__PUBLIC__/js/layer/layer.js"></script><!-- 弹窗js 参考文档 http://layer.layui.com/-->
<script>

    $(function () {
        $('input').iCheck({
            checkboxClass: 'icheckbox_square-blue',
            radioClass: 'iradio_square-blue',
            increaseArea: '20%' // optional
        });
    });


    function fleshVerify(){
        //重载验证码
        $('#imgVerify').attr('src','/index.php?m=Admin&c=Admin&a=vertify&r='+Math.floor(Math.random()*100));
    }


    jQuery.fn.center = function () {
        this.css("position", "absolute");
        this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) +
                $(window).scrollTop()) - 30 + "px");
        this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) +
                $(window).scrollLeft()) + "px");
        return this;
    }

    function checkLogin(){
        var username = $('#username').val();
        var password = $('#password').val();
        var vertify = $('input[name="vertify"]').val();
        if( username == '' || password ==''){
            layer.alert('用户名或密码不能为空', {icon: 2}); //alert('用户名或密码不能为空');
            return;
        }
        if(vertify ==''){
            layer.alert('验证码不能为空', {icon: 2});
            return;
        }
        if(vertify.length !=4){
            layer.alert('验证码错误', {icon: 2});
            fleshVerify();
            return;

        }

        $.ajax({
            url:'/index.php?m=Admin&c=Admin&a=login&t='+Math.random(),
            type:'post',
            dataType:'json',
            data:{username:username,password:password,vertify:vertify},
            success:function(res){
                if(res.status==1){
                    top.location.href = res.url;
                }else{
                    layer.alert(res.msg, {icon: 2});

                }
            },
            error : function(XMLHttpRequest, textStatus, errorThrown) {
                layer.alert('网络失败，请刷新页面后重试', {icon: 2});
            }
        })
    }

    document.onkeydown=function(event){
        e = event ? event :(window.event ? window.event : null);
        if(e.keyCode==13){
            checkLogin();
        }
    }
</script>
</body>
</html>